/* 
  学习目标：useEffect监听多个状态的变化
*/

import React, { useEffect, useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  const [msg, setMsg] = useState('msg');

  // 1. 多次调用useEffect，分开监听
  // useEffect(() => {
  //   console.log('count最新的值', count);
  // }, [count]);

  // useEffect(() => {
  //   console.log('msg最新的值', msg);
  // }, [msg]);

  // 2. 数组内写上多个依赖项， 合起来写
  useEffect(() => {
    console.log('count最新的值', count);
    console.log('msg最新的值', msg);
  }, [count, msg]);

  return (
    <div>
      <button onClick={() => setMsg(msg + '!')}>点我修改Msg</button>
      <button onClick={() => setCount(count + 1)}>点我count+1</button>
    </div>
  );
}
